<template>
  <div class="detail-info">
    <el-form label-width="120px" ref="ruleForm" class="demo-ruleForm">
      <div class="detail-info" style="margin-top: 20px">
        <div class="form-item">
          <h4>基本信息</h4>
          <el-form-item label="分公司：">
            <span>{{ detailData.branchName }}</span>
          </el-form-item>
          <el-form-item label="所属部门：">
            <span>{{ detailData.departName }}</span>
          </el-form-item>
          <el-form-item label="所属仓库：">
            <span>{{ detailData.limitStoreName }}</span>
          </el-form-item>
          <el-form-item label="客资类型：">
            <span>{{ detailData.customerName }}</span>
          </el-form-item>
        </div>
      </div>
      <div class="detail-info" style="margin-top: 50px">
        <div class="form-item">
          <h4>活动信息</h4>
          <el-form-item label="起止时间：">
            <span>{{ detailData.start_time }}</span> 至 <span>{{ detailData.end_time }}</span>
          </el-form-item>
          <el-form-item label="促销费用：">
            <span>{{ detailData.customerName }}</span>
          </el-form-item>
          <el-form-item label="限购类型：">
            <span>{{ detailData.customerName }}</span><span>，限购数量：{{ detailData.customerName }}</span>
          </el-form-item>
          <el-form-item label="可销售上限：" prop="name">
            <span>{{ detailData.customerName }}</span>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="form-item">
      <h4>商品信息</h4>
      <el-table :data="detailData.main_product" max-height="200" border style="width: 100%; margin-top: 10px">
        <el-table-column prop="product_id" label="商品ID" align="center" width="80"></el-table-column>
        <el-table-column prop="name" label="商品名称" align="center" width="120"></el-table-column>
        <el-table-column prop="saleunit" label="单位" align="center" width="80"></el-table-column>
        <el-table-column prop="salenorm" label="规格" align="center" width="90">
        </el-table-column>
        <el-table-column label="系统售价" align="center" width="100">
          <template scope="scope">
            <span>{{ scope.row.saleprice/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成本价" align="center" width="90">
          <template scope="scope">
            <span>{{ scope.row.cgprice/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折扣" align="center" width="100">
          <template scope="scope">
            <span>{{ scope.row.discount }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="cxmls" label="优惠金额" align="center" width="100"></el-table-column>
        <el-table-column prop="price_real" label="促销价" align="center" width="100"></el-table-column>
        <el-table-column label="促销毛利" align="center" width="100">
          <template scope="scope">
            <span>{{ scope.row.cxml/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="促销毛利率" align="center" width="110">
          <template scope="scope">
            <span>{{ scope.row.cxmll }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="cxmls" label="毛利损失" align="center" width="100"></el-table-column>
        <el-table-column label="供应商承担金额" align="center" width="120">
          <template scope="scope">
            <span v-if="scope.row.providerholdprice == 0">{{ scope.row.providerholdprice }}</span>
            <span v-if="scope.row.providerholdprice != 0">{{ scope.row.providerholdprice/100 }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="form-item">
      <h4>审核信息</h4>
      <el-table :data="detailData.main_product" border style="width: 100%; margin-top: 10px">
        <el-table-column prop="auditor" label="审核人姓名" align="center"></el-table-column>
        <el-table-column prop="content" label="任务内容" align="center"></el-table-column>
        <el-table-column prop="resultName" label="审核结果" align="center"></el-table-column>
        <el-table-column prop="opinion" label="审核意见" align="center"></el-table-column>
        <el-table-column prop="auditTime" label="审核时间" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import mixins from '../../../../components/mixins.vue'
  import { activity } from '../../../../config/proxy.js'
  export default {
    mixins: [mixins],
    data () {
      return {
        detailData: []
      }
    },
    created () {
      this.searchDetail(this.$store.state.tab.uid)
    },
    methods: {
      searchDetail (id) {
        activity.sphd.detail({id: id}, (res) => {
          console.log(res)
          if (res.message === 'ok') {
            this.detailData = res.content
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      }
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      },
      userId: function (state) {
        return state.user.info.user_id
      },
      uorId: function (state) {
        return state.user.info.uor_id
      },
      orgName: function (state) {
        return state.user.info.parOrgName
      },
      orgId: function (state) {
        return state.user.info.or_org_id
      },
      roleId: function (state) {
        return Number(state.user.info.roleid)
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      bid: function (state) {
        return state.user.info.branchOrgId
      }
    })
  }
</script>
<style>
  .dialog .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .stair {
    margin-left: 66px;
    font-size: 14px;
    color: #48576a;
  }
</style>
